import React, { Component } from "react";
import { DataSet, Table, TextField, Button } from "choerodon-ui/pro";
import { ColumnProps } from "choerodon-ui/pro/lib/table/Column";
import { TableQueryBarType } from "choerodon-ui/pro/lib/table/enum";

interface propsType {}
interface stateType {
  isHidden: boolean;
}

export default class TableTest extends Component<propsType, stateType> {
  tableDs: DataSet;

  constructor(props: any) {
    super(props);
    this.state = { isHidden: true };
    this.tableDs = new DataSet({
      data: [
        {
          name: "ming",
          age: 12,
        },
      ],
      fields: [
        {
          name: "name",
          label: "名称",
        },
        {
          name: "age",
          label: "年龄",
        },
      ],
      queryFields: [
        {
          name: "name",
          label: "名称",
        },
        {
          name: "age",
          label: "年龄",
        },
      ],
    });
  }

  get columns(): ColumnProps[] {
    return [
      {
        name: "name",
        align: "center",
      },
      {
        name: "age",
        align: "center",
      },
    ] as ColumnProps[];
  }

  render() {
    const { isHidden } = this.state;

    return (
      <>
        <Table
          dataSet={this.tableDs}
          columns={this.columns}
          // @ts-ignore
          queryFields={{ name: <TextField name='name' hidden={isHidden} /> }}
          queryBar={TableQueryBarType.professionalBar}
        ></Table>

        <Button
          onClick={() => {
            this.setState({
              isHidden: !isHidden,
            });
          }}
        >
          {isHidden ? "是隐藏" : "是显示"}
        </Button>
      </>
    );
  }
}
